<template>
  <div class="datepicker">
  	<input type="text" name="" placeholder="点击选择日期" v-model="date" id="datepicker">
  	<span class="fa fa-calendar"></span>
  	<common ref="common"></common>
  </div>
</template>

<script>
import '../../../static/laydate/laydate.js'
import common from '../common'
export default {
	data() {
		return {
			date: ""
		}
	},
	components: {
		common
	},
	created(){
		
	},
	mounted() {
		let time = this.$refs.common.getthisTime()
		time = time.slice(0,4)+"-"+time.slice(4,6)+"-"+time.slice(6,8)+" "+time.slice(8,10)+":"+time.slice(10,12)+":00"
		this.date = time
		this.$emit('time-change', time)
		
		laydate.render({
			elem: "#datepicker",
			type: "datetime",
			done: value => {
				this.date = value
				this.$emit('time-change', value)
			}
		})
	}
}
</script>

<style lang="less">
.datepicker{
	width: 90%;
	box-sizing: border-box;
	position: relative;
	input{
		width: 100%;
		padding-left: 20px;
		line-height: 28px;
		height: 28px;
		border: 1px solid #D5D5D5;
		border-radius: 5px;
		box-sizing: border-box;
		outline: none;
		color: #8B8B8B;
	}
	span{
		display: inline-block;
		width: 20px;
		height: 20px;
		position: absolute;
	    top: 23px;
	    right: 25px;
	    color: #4F7CBA;
	}
}
</style>
